<template>
  <div class="w-full !h-full flex flex-col justify-between">
    <slot name="header"></slot>
    <el-scrollbar view-class="flex-auto">
      <div class="flex justify-center my-10px">
        <div class="flex pos-relative w-[120px]">
          <el-image
            class="w-[120px] h-[120px] rounded-[4px] align-middle"
            :src="user.avatar || undefined"
          />
          <Icon
            icon="ep:edit-pen"
            :size="20"
            @click.prevent="handleEdit"
            class="c-[var(--el-color-primary)]! cursor-pointer pos-absolute! top-0 right-0"
          />
        </div>
      </div>
      <el-row :gutter="10" class="w-100% mx-0!">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="flex-1 flex items-center justify-center mb-10px">
            <el-text
              :title="user.nickname"
              truncated
              class="custom-text-20 c-[#11192d]! .dark:c-[#fff]!"
            >
              {{ user.nickname }} <el-divider direction="vertical" />
              {{ user.sex == 1 ? '男' : '女' }}
            </el-text>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="flex-1 flex items-center justify-center mb-10px">
            <el-tag effect="plain" size="large" class="custom-text-20">
              <div class="flex items-center">
                {{ phoneFormat(user.mobile) }}
                <Icon
                  icon="svg-icon:memberShipBuy"
                  @click="handleBuyMemberShip"
                  class="ml-10px"
                  :size="20"
                  v-if="!user.memberShip"
                />
                <el-image v-if="user.memberShip" :src="user.memberPicUrl" class="h-20px w-20px" />
              </div>
            </el-tag>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="flex-1 flex items-center justify-center mb-10px">
            <el-text class="custom-text-16" truncated> {{ user.tenantName }} </el-text>
          </div>
        </el-col>

        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <content-wrap class="cursor-pointer card-item">
            <div class="flex justify-between">
              <el-text truncated class="custom-text-14">优惠券</el-text>
              <div class="flex items-center">
                <el-text truncated type="primary" class="custom-text-14"
                  >{{ user.couponNum || 0 }}张</el-text
                >
                <Icon icon="ep:arrow-right" />
              </div>
            </div>
          </content-wrap>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <content-wrap class="cursor-pointer card-item">
            <div class="flex justify-between">
              <el-text truncated class="custom-text-14">余额</el-text>
              <div class="flex items-center">
                <el-text truncated type="primary" class="custom-text-14"
                  >￥{{ fenToYuan(user.balance) }}</el-text
                >
                <Icon icon="ep:arrow-right" />
              </div>
            </div>
          </content-wrap>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <content-wrap class="cursor-pointer card-item">
            <div class="flex justify-between">
              <el-text truncated class="custom-text-14">积分</el-text>

              <div class="flex items-center">
                <el-text truncated type="primary" class="custom-text-14">{{
                  user.point || 0
                }}</el-text>
                <Icon icon="ep:arrow-right" />
              </div>
            </div>
          </content-wrap>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <content-wrap class="cursor-pointer card-item">
            <div class="flex justify-between">
              <el-text truncated class="custom-text-14">资产</el-text>

              <div class="flex items-center">
                <el-text truncated type="primary" class="custom-text-14" v-if="user.ppcNum > 0"
                  >{{ user.ppcNum }}张 {{ fenToYuan(user.ppcBalance) }}元</el-text
                >
                <el-text truncated type="primary" class="custom-text-14" v-else>
                  {{ fenToYuan(user.ppcBalance) }}元</el-text
                >
                <Icon icon="ep:arrow-right" />
              </div>
            </div>
          </content-wrap>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <content-wrap class="cursor-pointer card-item">
            <div class="flex justify-between" @click="handleRepayment">
              <el-text truncated class="custom-text-14">欠款</el-text>

              <div class="flex items-center">
                <el-text truncated type="primary" class="custom-text-14"
                  >￥{{ fenToYuan(user.arrearsPrice) }}</el-text
                >
                <Icon icon="ep:arrow-right" />
              </div>
            </div>
          </content-wrap>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <content-wrap class="cursor-pointer card-item">
            <div class="flex justify-between">
              <el-text truncated class="custom-text-14">员工</el-text>

              <div class="flex items-center">
                <el-text truncated type="primary" class="custom-text-14">{{
                  user.employee
                }}</el-text>
                <Icon icon="ep:arrow-right" />
              </div>
            </div>
          </content-wrap>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <content-wrap class="cursor-pointer card-item">
            <div class="flex justify-between">
              <el-text truncated class="custom-text-14">等级</el-text>
              <div class="flex items-center">
                <el-text truncated type="primary" class="custom-text-14">{{
                  user.levelName || '无'
                }}</el-text>
                <Icon icon="ep:arrow-right" />
              </div>
            </div>
          </content-wrap>
        </el-col>

        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <content-wrap class="cursor-pointer card-item">
            <div class="flex justify-between">
              <el-text truncated class="custom-text-14">注册</el-text>
              <div class="flex items-center">
                <el-text truncated type="primary" class="custom-text-14">{{
                  user.createTime ? formatDate(user.createTime, 'YYYY-MM-DD') : '空'
                }}</el-text>
                <Icon icon="ep:arrow-right" />
              </div>
            </div>
          </content-wrap>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <content-wrap class="cursor-pointer card-item">
            <div class="flex justify-between">
              <el-text truncated class="custom-text-14">距今到店</el-text>
              <div class="flex items-center">
                <el-text truncated type="primary" class="custom-text-14"
                  >{{ user.activeDays }}天</el-text
                >
                <Icon icon="ep:arrow-right" />
              </div>
            </div>
          </content-wrap>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <content-wrap class="cursor-pointer card-item">
            <div class="flex justify-between">
              <el-text truncated class="custom-text-14">生日</el-text>
              <div class="flex items-center">
                <el-text truncated type="primary" class="custom-text-14">{{
                  user.birthday ? formatDate(user.birthday, 'MM-DD') : '空'
                }}</el-text>
                <Icon icon="ep:arrow-right" />
              </div>
            </div>
          </content-wrap>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <content-wrap class="cursor-pointer card-item">
            <div class="flex justify-between">
              <el-text truncated class="custom-text-14">体重</el-text>
              <div class="flex items-center">
                <el-text truncated type="primary" class="custom-text-14">{{
                  user.weight ? `${user.weight}KG` : '-'
                }}</el-text>
                <Icon icon="ep:arrow-right" />
              </div>
            </div>
          </content-wrap>
        </el-col>
      </el-row>
    </el-scrollbar>

    <slot name="footer"></slot>
  </div>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import * as UserApi from '@/api/member/user'
import * as WalletApi from '@/api/pay/wallet/balance'
import { phoneFormat } from '@/utils/formatter'
import { fenToYuan } from '@/utils'

const { user } = defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO }>()
const emits = defineEmits(['edit', 'buyMemberShip'])
const handleEdit = () => {
  emits('edit')
}
const handleBuyMemberShip = () => {
  emits('buyMemberShip')
}
// 还款
const { currentRoute, push } = useRouter() // 路由跳转
const handleRepayment = () => {
  let path = currentRoute.value.path

  push({
    name: 'ShopRepayment',
    query: {
      returnUrl: encodeURIComponent(path)
    }
  })
}
</script>
<style lang="scss" scoped>
.card-item {
  &:hover {
    border: 1px solid var(--el-color-primary) !important;
    background: var(--el-color-primary-light-9) !important;
  }
}
</style>
